<template>
  <view class="creamDetails">
    <navTabrBack
      :navbackStyle="['padding-right: 20rpx;', 'color: #fff']"
      :title="'专利集详情'"
      :titleStyle="['padding: 0 28rpx;', 'color: #fff']"
    ></navTabrBack>
    <!-- 精品数据头部 -->
    <view class="creamHeader">
      <!-- 作者信息展示 -->
      <view class="creamInfo">
        <image
          style="flex: none"
          :src="img + rezlGroup.img"
          mode="scaleToFill"
        />
        <view class="creamAuthor">
          <view class="authorTitle"
            ><view class="title">{{ rezlGroup.name }}</view> <view class=""></view
          ></view>
          <view class="creamUseName">
              <image @click="toUserInfo"
                :src="img + rezlGroup.sysUser?.headerImg"
              />
              <view  @click="toUserInfo">{{ rezlGroup.sysUser?.nickName }}</view>
            <button
              v-show="
                rezlGroup.isFollow == 0 &&
                userInfo?.ID != rezlGroup.sysUser?.ID
              "
              @click="addUser"
            >
              +关注
            </button>
          </view>
          <view class="creamTime"><!-- {{ rezlGroup.sysUser. }} --></view>
          <view class="creamTime">{{ rezlGroup.UpdatedAt?.split("T")[0] }}</view>
        </view>
      </view>
      <!-- 作者简介 -->
      <view class="creamSum"
        >{{ rezlGroup.desc }}
        <view class="creamBtn">
          <!-- 订阅分享按钮 -->
          <button
            @click="
              editUseAdd(userInfo?.ID != rezlGroup.sysUser?.ID && rezlGroup.isOrder == 0)
            "
            :class="
              userInfo?.ID != rezlGroup.sysUser?.ID && rezlGroup.isOrder == 0
                ? ''
                : 'myCr'
            "
          >
            <view class="iconfont icon-dingyue"></view>订阅
          </button>
          <button
            :class="dataList.length != 0 ? '' : 'myCr'"
            type="parmay"
            :open-type="dataList.length != 0 ? 'share' : ''"
          >
            <view class="iconfont icon-zhuanfa"></view>分享
          </button>
        </view>
      </view>
    </view>
    <!-- 专利信息 -->
    <view class="patentOpt">
      <view class="patentInfoList"><text>专利信息</text>（{{ total }}）</view>
      <view class="PatenInfo">
        <!-- <view class="iconfont icon-zhuanfa"></view>
        <view @click="checkFlage(!flage)">批量</view> -->
      </view>
    </view>
  </view>
  <view class="creamList">
    <!-- 列表 -->
    <view class="serchItem" v-for="(item, index) in dataList" :key="index">
      <checkbox v-show="flage" class="checkCream" value="cb" checked="true" />
      <view class="serchItemIndex">{{ index + 1 }}</view>
      <view @click="toPatentDetile(item.baseNum)">
        <view class="patentTitle">{{ item.baseName }}</view>
        <view class="patentClassify">更新时间：{{ item.UpdatedAt.split("T")[0] }}</view>
      </view>
    </view>
    <!-- 占位 -->
    <!-- <view :style="true ? 'height: 145rpx;' : 'height:0'"></view> -->
  </view>
  <!-- <view :class="flage ? 'checkAll' : 'noheight'">
    <view class="isCheckAll"
      ><checkbox
        class="checkCream"
        value="cb"
        checked="false"
        color="#1677FF"
      />全选</view
    >
    <button type="paramy">删除</button>
  </view> -->
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="订阅成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success1" type="message">
    <uni-popup-message
      type="success"
      message="关注成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { ref, reactive, toRefs, inject } from "vue";
import { onLoad, onShareAppMessage, onReachBottom } from "@dcloudio/uni-app";
let $url = inject("$url");
const $imgSrc = inject("$imgSrc")
let data = reactive({
  id: null,
  rezlGroup: {},
  page: 1,
  total: 0,
  dataList: [],
  userInfo: {},
  isAdd: true,
  img: ""
});
onShareAppMessage((res) => {
  return {
    title: data.rezlGroup.name, //标题
    path: `/pages/creamDetails/index?id=${data.id}`, //可以指定动态路径
    imageUrl: $imgSrc + data.rezlGroup.img,
    desc: data.rezlGroup.desc,
  };
});
const toUserInfo = () => {
  uni.navigateTo({
    url: `/pages/userInfoDetile/userInfoDetile?id=${data.rezlGroup.sysUser.ID}&isOk=0`,
  });
};
onReachBottom(() => {
  data.page = data.page + 1;
  updataList();
});
let { rezlGroup, id, dataList, total, userInfo, img } = toRefs(data);
let flage = ref(false);
let success = ref();
let success1 = ref();
// const checkFlage = (bool) => {
//   flage.value = bool;
//   console.log(flage.value, bool);
// }; //发起网络请求 接收用户信息
onLoad((id) => {
  data.page = 1
  data.img = $imgSrc
  if (id.isAdd == 1) {
    data.isAdd = false;
  }
  data.id = id.id;
  data.dataList = [];
  updataList();

  uni.getStorage({
    key: "useInfo",
    fail: (err) => {
      // uni.navigateTo({
      //   url: "/pages/login/login?type=1",
      // });

      dataDetile(false);
    },
    success: function (res) {
      data.userInfo = res.data;
      console.log(res.data);
      dataDetile(true);
    },
  });
});
const toPatentDetile = (id) => {
  uni.navigateTo({
    url: `/pages/patentDetails/index?id=${id}&type=1`,
  });
};
const updataList = () => {
  uni.request({
    url: $url + `/base/getZlCollectList?page=${data.page}&pageSize=10&groupId=${data.id}`,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.total = res.data.data.total;
      res.data.data?.list.map((item) => {
        data.dataList.push(item);
      });
    },
  });
};
const dataDetile = (bool) => {
  if (bool) {
    uni.request({
      url: $url + `/zlGroup/findZlGroup?ID=${data.id}`,
      method: "GET",
      timeout: 6000,
      header: {
        "x-token": data.userInfo.token,
      },
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        data.rezlGroup = res.data.data.rezlGroup;
      },
    });
  } else {
    uni.request({
      url: $url + `/base/findZlGroup?ID=${data.id}`,
      method: "GET",
      timeout: 6000,
      fail: (err) => {
        console.log(err, "请求失败！");
      },
      success(res) {
        data.rezlGroup = res.data.data.rezlGroup;
      },
    });
  }
};

const addUser = () => {
  uni.getStorage({
    key: "useInfo",
    fail: (err) => {
      uni.navigateTo({
        url: "/pages/login/login?type=1",
      });
    },
    success: function (res) {
      if (res.data.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      uni.request({
        url: $url + `/zlFollow/createZlFollow`,
        method: "POST",
        timeout: 6000,
        header: {
          "x-token": res.data.token,
        },
        data: { followUserId: data.rezlGroup.userId * 1, userId: res.data.ID },
        success(res) {
          dataDetile(true);
          success1.value.open();
        },
      });
    },
  });
};
const editUseAdd = (bool) => {
  if (bool == false) return;
  uni.getStorage({
    key: "useInfo",
    fail: (err) => {
      uni.navigateTo({
        url: "/pages/login/login?type=1",
      });
    },
    success: function (res) {
      if (res.data.token?.length < 1) {
        uni.navigateTo({
          url: "/pages/login/login?type=1",
        });
      }
      uni.request({
        url: $url + `/zlOrder/createZlOrder`,
        method: "POST",
        timeout: 6000,
        header: {
          "x-token": res.data.token,
        },
        data: { groupId: data.id * 1 },
        success(res) {
          dataDetile(true);
          success.value.open();
        },
        fail: (err) => {
          uni.navigateTo({
            url: "/pages/login/login?type=1",
          });
        },
      });
    },
  });
};
</script>

<style scoped>
.PatenInfo {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.PatenInfo .iconfont {
  margin-right: 15rpx;
}
.noheight {
  height: 0;
  display: none !important;
}
.creamDetails {
  background: #1677ff;
}
.creamInfo {
  display: flex;
  padding: 30rpx 27rpx 32rpx 27rpx;
}
.creamInfo image {
  margin-top: 10rpx;
  width: 217rpx;
  height: 217rpx;
  background: #d8d8d8;
  border-radius: 11rpx;
  margin-right: 24rpx;
}
.creamAuthor {
  display: flex;
  flex-direction: column;
}
.authorTitle .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 430rpx;
}
.authorTitle {
  display: flex;
  align-items: center;
  width: 480rpx;
  font-size: 33rpx;
  font-weight: 600;
  color: #ffffff;
}
.creamUseName {
  margin-top: 30rpx;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.creamUseName image {
  margin: 0;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  color: #eeeeee;
}
.creamTime {
  margin-top: 10rpx;
  color: #ffffff;
  font-size: 25rpx;
  font-weight: 400;
}
.creamUseName view {
  font-size: 25rpx;
  font-weight: 400;
  color: #eeeeee;
  margin: 0 10rpx 0 8rpx;
}
.creamUseName button {
  margin: 0;
  width: 91rpx;
  height: 36rpx;
  line-height: 36rpx;
  background: #599eff;
  border-radius: 18rpx;
  margin: 0;
  font-size: 22rpx;
  font-weight: 400;
  color: #ffffff;
  padding: 0;
}
.creamSum {
  font-size: 25rpx;
  font-weight: 400;
  color: #eeeeee;
  padding: 0 27rpx;
}
.creamBtn {
  display: flex;
  align-items: center;
}
.creamBtn button {
  width: 217rpx;
  height: 80rpx;
  background: #599eff;
  border-radius: 40rpx;
  margin: 30rpx 21rpx 55rpx 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #eeeeee;
}
.creamBtn .iconfont {
  margin-right: 10rpx;
  display: inline-block;
  color: #ffffff;
}
/* 专利信息 */
.patentOpt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 27rpx;
  background: #edf4ff;
  height: 109rpx;
  border-radius: 14rpx 14rpx 0rpx 0rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #666666;
}
.patentInfoList text {
  font-size: 33rpx;
  font-weight: 600;
  color: #333333;
}
.creamList {
  background-color: #ffffff;
  padding: 32rpx 27rpx 50rpx 27rpx;
}
/* 展示列表 */
.serchItem {
  display: flex;
  align-items: center;
  margin-top: 32rpx;
}
.checkCream {
  width: 40rpx;
  margin-right: 32rpx;
}
.serchItemIndex {
  margin-right: 20rpx;
  width: 50rpx;
  color: #999;
}
.patentTitle {
  margin-top: 7rpx;
  width: 400rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.patentClassify {
  margin-top: 9rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #888888;
}
/* 悬浮窗 */
.checkAllCream {
  position: fixed;
  left: 0;
  bottom: -145rpx;
  width: 100%;
  height: 145rpx;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
}
.checkAll {
  position: fixed;
  left: 0;
  bottom: 0rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 27rpx;
  width: 696rpx;
  height: 145rpx;
  background: #ffffff;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
}
.isCheckAll {
  font-size: 29rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  display: flex;
  align-items: center;
}
.checkAll button {
  width: 139rpx;
  height: 53rpx;
  box-shadow: 0rpx -4rpx 11rpx 0rpx rgba(236, 236, 236, 0.5);
  border-radius: 26rpx;
  border: 2rpx solid #1677ff;
  font-size: 29rpx;
  font-weight: 400;
  color: #1677ff;
  line-height: 40rpx;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.myCr .iconfont,
.myCr {
  background: #3187ff !important;
  border-radius: 40rpx;
  color: #539bff !important;
}
</style>
